<template>
  <div class="tags">
    <el-tag
      v-for="(tag,index) in tags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      @click="changeMenu(tag)"
      @close="closeMenu(tag,index)"
    >
        {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
    name:'CommonTab',
    setup(){
        const store = useStore()
        const router= useRouter()
        const route = useRoute()

        const tags = store.state.tabsList
        
        const changeMenu =(item)=>{
            router.push({name:item.name})
        }
        const closeMenu =(tag,index)=>{
            let length = tags.length-1
            store.commit('CLOSE_TAG',tag)
            if(tag.name !== route.name){
                return;
            }
            if(index === length){
                router.push({
                    name:tags[index-1].name
                })
            }else{
                router.push({
                    name:tags[index].name
                })
            }
        }
        return {
            tags,
            changeMenu,
            closeMenu
        }
    }
}
</script>

<style lang="less" scoped>
.tags{
    margin-top: 10px;
    margin-left: 10px;
    width: 100%;
    .el-tag{
        margin-left: 8px;
        padding: 12px;
        cursor: pointer;
    }
}

</style>